import React, { useEffect } from 'react'
import { isValidLogin } from '../api/login'
import { LoginEntity } from '../model/login'
import { useHistory } from 'react-router-dom'
import {Card,CardHeader,CardContent} from '@material-ui/core'
import makeStyles from '@material-ui/styles/makeStyles'
import createStyles from '@material-ui/styles/createStyles'
import {LoginComponent} from './login.component'

    const useFormStyle=makeStyles((theme)=>
        createStyles({
            card:{
                maxWidth:400,
                margin: "0 auto"
            }
        })
    )
export const LoginContainer=()=>{
    const history=useHistory()
    const classes= useFormStyle()
    // useEffect(()=>{
    //     handleLogin({
    //         login:'admin',
    //         password:'test'
    //     })
    // },[])
    const loginSuccessed=(isVaild:boolean)=>{
        if(isVaild){
            history.push('./pageB')
        }
        else console.log('出错了')
    }
    const handleLogin=(login:LoginEntity)=>{
        // loginSuccessed(await isValidLogin(login))
        isValidLogin(login).then(loginSuccessed)
    }
    return (
        <>
        <Card className={classes.card}>
            <CardHeader title="Login"/>
            <CardContent>
                <LoginComponent onLogin={handleLogin} />
            </CardContent>
        </Card>
        </>
    )
}